<template>
  <div class="container_leftbar1">
    <ul class="icons_list" style="padding:20px 28px;">
      <li>
        <span class="building"></span>土 建
      </li>
      <li>
        <span class="city"></span>城 市
      </li>
      <li>
        <span class="h220"></span>220KV
      </li>
      <li>
        <span class="h220"></span>220KV
      </li>
      <li>
        <span class="h750"></span>750KV
      </li>
      <li>
        <span class="h500"></span>500KV
      </li>
      <li>
        <span class="h330"></span>330KV
      </li>
      <li>
        <span class="h04"></span>0.4KV
      </li>
      <li>
        <span class="h10"></span>10KV
      </li>
      <li>
        <span class="h35"></span>35KV
      </li>
      <li>
        <span class="h110"></span>110KV
      </li>
      <li>
        <span class="sub"></span>变电站
      </li>
      <li>
        <span class="well"></span>圆形井盖
      </li>
      <li>
        <span class="vwell"></span>虚拟井盖
      </li>
      <li>
        <span class="wellfx"></span>方形井盖
      </li>
      <li>
        <span class="towerjg"></span>脚钢塔
      </li>
      <li>
        <span class="towergg"></span>钢管塔
      </li>
      <li>
        <span class="towerx"></span>钢管杆
      </li>
      <li>
        <span class="towerq"></span>未定塔杆
      </li>
      <li>
        <span class="towersn"></span>水泥杆
      </li>
      <li>
        <span class="tower0"></span>木 杆
      </li>
      <li>
        <span class="kg"></span>开关站
      </li>
      <li>
        <span class="df"></span>分支箱
      </li>
      <li>
        <span class="hw"></span>环网柜
      </li>
      <li>
        <span class="trans"></span>变压器
      </li>
      <li>
        <span class="margin"></span>盘 余
      </li>
      <li>
        <span class="transition"></span>中间接头
      </li>
      <li>
        <span class="line"></span>线 路
      </li>
      <li>
        <span class="bzd"></span>标准段
      </li>
      <li>
        <span class="wireseg"></span>电缆段
      </li>
      <li>
        <span class="cableseg"></span>导线段
      </li>
      <li>
        <span class="pipeline"></span>管沟线
      </li>
      <li>
        <span class="road"></span>道 路
      </li>
      <li>
        <span class="rickpipe"></span>排 管
      </li>
      <li>
        <span class="bridges"></span>桥 架
      </li>
      <li>
        <span class="channel"></span>沟 道
      </li>
      <li>
        <span class="buried"></span>直 埋
      </li>
      <li>
        <span class="tunnel"></span>隧 道
      </li>
      <li>
        <span class="jacking"></span>顶 管
      </li>
      <li>
        <span class="v"></span>虚拟管沟
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "leftbar1"
};
</script>
<style lang="scss" scoped>
.icons_list {
  float: left;
  clear: both;
}

.icons_list li {
  float: left;
  width: 56px !important;
  padding: 5px 0;
  text-align: center;
  border: 1px #fff solid;
  border-radius: 2px;
  height: auto !important;
  line-height: 14px !important;
}

.icons_list li span {
  display: block;
}

.icons_list li span {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
  margin-bottom: 4px;
}

.icons_list li:hover {
  border: 1px #ccc solid;
  background: #f2f2f2;
}

.icons_list li .city {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -900px;
}

.icons_list li .h220 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 0;
}

.icons_list li .h750 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -30px;
}

.icons_list li .h500 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -60px;
}

.icons_list li .h330 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -90px;
}

.icons_list li .h04 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -120px;
}

.icons_list li .h10 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -150px;
}

.icons_list li .h35 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -180px;
}

.icons_list li .h110 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -210px;
}

.icons_list li .vwell {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -240px;
}

.icons_list li .margin {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -270px;
}

.icons_list li .transition {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -300px;
}

.icons_list li .df {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -330px;
}

.icons_list li .hw {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -360px;
}

.icons_list li .kg {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -390px;
}

.icons_list li .tower0 {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -420px;
}

.icons_list li .towerq {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -450px;
}

.icons_list li .towerx {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -480px;
}

.icons_list li .towergg {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -510px;
}

.icons_list li .towerjg {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -540px;
}

.icons_list li .towersn {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -570px;
}

.icons_list li .wellfx {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -600px;
}

.icons_list li .trans {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -630px;
}

.icons_list li .line {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -686px;
}

.icons_list li .bzd {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -714px;
}

.icons_list li .wireseg {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -744px;
}

.icons_list li .cableseg {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -774px;
}

.icons_list li .pipeline {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -804px;
}

.icons_list li .road {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -836px;
}

.icons_list li .well {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -870px;
}

.icons_list li .building {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -660px;
}

.icons_list li .sub {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -930px;
}

.icons_list li .sub {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -930px;
}

.icons_list li .rickpipe {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -955px;
}

.icons_list li .bridges {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -985px;
}
.icons_list li .channel {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -1015px;
}

.icons_list li .buried {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -1045px;
}
.icons_list li .tunnel {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -1075px;
}
.icons_list li .jacking {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -1105px;
}
.icons_list li .v {
  background: url(~@assets/img/icons_ele_large.png) no-repeat 0 -1135px;
}
</style>